<template>
  <div>
    <el-row>
      <el-col :span="24" align="right">
        <div style="margin-top:10px">
          <el-button @click="addNewRecord" type="primary">添加事件</el-button>
          <el-input style="width:200px" v-model="filters.eventName" placeholder="事件名称"></el-input>
          <el-select style="width:200px" v-model="filters.eventTypeValue" placeholder="事件类型">
            <el-option v-for="(v,i) of EventType" :key="i" :label="v.eventTypeName" :value="v.eventTypeValue"></el-option>
          </el-select>
          <el-select v-model="filters.status" placeholder="请输入事件处理状态">
            <el-option v-for="(v,i) of EventStatus" :key="i" :label="v.sseventStatusTypeName" :value="v.sseventStatusTypeValue"></el-option>
          </el-select>
          <el-button type="primary" icon="search" @click="getInfo">搜索</el-button>
          <el-button type="primary" @click="flushAll">刷新</el-button>
        </div>
        <el-row style="margin-top:20px">
          <el-col :span="$store.getters.user.userRole=='超级管理员'?3:0">
            <treeComponent style="margin-top:-52px" @GetNodeValue="GetNodeValue"></treeComponent>
          </el-col>
          <el-col :span="$store.getters.user.userRole=='超级管理员'?21:24">
            <el-table :data="list" border>
              <el-table-column type="index" width="50"></el-table-column>
              <el-table-column prop="eventName" label="事件名称" align="center"></el-table-column>
              <el-table-column prop="eventPlace" label="发生地点" align="center"></el-table-column>
              <el-table-column prop="evenScaleTypeName" label="事件规模" align="center"></el-table-column>
              <el-table-column prop="eventTypeName" label="事件类型" align="center"></el-table-column>
              <el-table-column prop="eventDate" label="发生时间" align="center"></el-table-column>
              <el-table-column prop="eventStatusName" label="事件处理状态" align="center">
                <template scope="scope">
                  {{getStatus(scope.row)}}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" align="center">
                <template scope="scope">
                  <el-button type="text" v-if="scope.row.eventStatus==null||scope.row.eventStatus==''" style="color:red" @click="upEvent(scope.row.disputeEventID)">上报事件</el-button>
                  <el-button type="text" v-if="(scope.row.eventStatus=='02'||scope.row.eventStatus=='08')&&!isDistribute(scope.row.disputeEventID)" style="color:red" @click="dealEvent(scope.row.disputeEventID)">处理事件(不予立案)</el-button>
                  <el-button type="text" @click="ckDetail(scope.row.disputeEventID)">查看详情</el-button>
                  <!-- <el-button type="text" v-if="scope.row.eventStatus==''" @click="editEvent(scope.row.disputeEventID)">编辑</el-button> -->
                  <el-button type="text" v-if="scope.row.eventStatus==''" @click="deleteEvent(scope.row.disputeEventID)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
             <el-pagination style="margin-top:10px;float:right" layout="prev, pager, next" :total="totalInfo"  @current-change="handleCurrentChange">
            </el-pagination>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog title="事件处理" :visible.sync="visible">
      <el-form :model="form2" label-width="100px">
        <el-form-item>
          <h1>事件基本信息</h1>
        </el-form-item>
        <el-form-item label="处理人ID">
          <el-input disabled style="width:400px" v-model="form2.dealingUserID"></el-input>
        </el-form-item>
        <el-form-item label="处理时间">
          <el-date-picker type="datetime" v-model="form2.dealingTime"></el-date-picker>
        </el-form-item>
        <el-form-item label="请选择化解方式">
          <el-select v-model="form2.solvingMethodType" placeholder="">
            <el-option v-for="(v,i) of SolvingMethodType" :key="i" :label="v.solvingMethodTypeName" :value="v.solvingMethodTypeValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否调解成功">
          <el-radio-group v-model="form2.isSuccessInSolving">
            <el-radio :label="1">成功</el-radio>
            <el-radio :label="0">失败</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="调解情况">
          <el-input type="textarea" v-model="form2.dealingInf"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form2.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="insertDealInfo">提交，下一步上传图片、视频</el-button>
        </el-form-item>
        <el-form-item v-if="form2.eventDealingID!==''">
          <h1>图片、视频信息</h1>
        </el-form-item>
        <el-form-item v-if="form2.eventDealingID!==''">
          <el-upload
          :action="getDomain()+'/msmis/api/dispute/addDisputeEventDealingPictures?ID='+form2.eventDealingID"
          :file-list="fileList"
          :headers="header"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">可上传jpg/jpeg/png文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item v-if="form2.eventDealingID!==''">
          <h4>视频上传</h4>
          <el-upload drag
            :action="getDomain()+'/msmis/api/dispute/addDisputeEventDealingVideo?ID='+form2.eventDealingID"
            :headers="header"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将视频拖到此处，或
              <em>点击上传</em>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="visible=false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog top="5%" title="查看详情" :visible.sync="visible2">
      <info :id="id"></info>
    </el-dialog>
  </div>
</template>

<script>
import treeComponent from "../../components/common/treeComponent";
import * as api from "@/api/contradictionManage/index";
import * as api2 from "@/api/zonghezhili/duiwujianshe";
import * as socket from "@/api";
import * as api3 from "../../api/securityManage";
import { getToken } from "../../utils/auth";
import info from "./checkDetail"

export default {
  components: {
    treeComponent: treeComponent,
    info:info
  },
  data() {
    return {
      header:{
        'token':getToken()
      },
      visible: false,
      visible2: false,
      id:"1",
      currentID: "",
      fileList: [],
      form2: {
        eventDealingID: "",
        eventID: "",
        dealingUserID: 1, // bigint comment '处理任务的人的用户ID',
        dealingTime: "", //   datetime,
        solvingMethodType: "", // char(4) DEFAULT NULL,
        isSuccessInSolving: "", // int(11) DEFAULT NULL,
        dealingInf: "", //  varchar(1000) comment '处理情况文字描述',
        remark: "" //  varchar(500),
      },
      filters: {
        id: 1,
        eventName: null, // 事件名称
        eventTypeValue: null,
        netGridID: null,
        status: "",
        page: 1,
        pageSize: 10
      },
      list: [
        {
          disputeEventID: "", //       bigint not null auto_increment,
          eventName: "", //             '事件名称',
          eventDate: "", //             '事件发生日期',
          eventPlace: "", //            '事件发生地点',
          evenScaleTypeValue: "", //    '事件规模',
          eventTypeValue: "", //        '事件类型编码',
          numberofJoinning: "", //      '涉及人数',
          eventIntroduction: "", //     '事件简述，不超2000字',
          relatedOrg: "", //            '涉及单位',
          majorPersonCertTypeCode: "", //'主要当事人证件代码类型，编码规范GA/T 517',
          majorPersonCertID: "", //     '主要当事人证件号码',
          majorPersonName: "", //       char(80),
          majorPersonSex: "", //        '主要当事人性别，编码符合GB/T 2261.1',
          majorPersonEthnicity: "", //  '主要当事人名族类别，详细见字典表',
          majorPersonEducation: "", //  '主要当事人学历类别，编码见表',
          majorPersonType: "", //       '主要当事人人员类别',
          majorPersonDetailAddress: "", //  '主要当事人居住详细地址',
          solvingDeadline: "", //      '化解时限',
          solvingMethodType: "", //    '化解方式，编码见 GBT 31000-2015文件之5.58',
          solvingManagment: "", //     '化解组织',
          solvingByPersonName: "", //   '化解责任人姓名',
          solvingByPersonContact: "", //'化解责任人联系方式，手机号或固定电话',
          isSuccessInSolving: "", //   '化解是否成功？值1表示成功，0表示不成功。',
          solvingIntroduction: "", //  '化解情况，不超2000字',
          evaluationDate: "", //       '考评日期，格式为YYYYMMDD',
          evaluationSuggestion: "", // '考评意见，不超2000字。',
          longitude: "", //            '地理经度信息，数字32，8',
          latitude: "", //             '地理纬度信息',
          eventStatus: "", //          '事件处理状态编码类型，见编码状态类型表',
          eventCheckStatus: "",
          netGridID: 1
        }
      ],
      form3: {},
      totalInfo: 0,
      AccidentType: [],
      AccidentKind: [],
      EventStatus: [],
      EventType: [],
      SolvingMethodType: [],
      res: false
    };
  },
  methods: {
    getDomain() {
      return 'http://' + window.location.host;
    },
    isDistribute(id) {
      let value;
      this.$jquery.ajax({
        url: "/msmis/api/dispute/isDistribute",
        async: false,
        headers: { token: getToken() },
        data: { id: id },
        success: function(res) {
          value = res.data;
        }
      });
      return value;
    },
    getStatus(obj) {
      if (obj.eventStatusName !== null) {
        return obj.eventStatusName;
      } else {
        return "事件待上报!";
      }
    },
    insertDealInfo() {
      this.form2.eventID = this.currentID;
      api.addDisputeEventDealing(this.form2).then(res => {
        if (res.code == 200) {
          this.form2.eventDealingID = res.data;
          this.$message({
            type: "success",
            message: "事件处理信息上传成功！"
          });
          let that = this;
          socket.send({username:4,message:'有新的矛盾纠纷事件需要审核!'});
          api.updateDisputeEventStatus("06", this.currentID).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "等待审核！"
              });
              this.getInfo();
            }
          });


        } else {
          this.$message({
            type: "error",
            message: "事件处理信息上传失败！"
          });
        }
      });
    },
    dealEvent(id) {
      this.visible = true;
      this.currentID = id;
    },
    upEvent(id) {
      this.$confirm("是否上报此事件记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          api.updateDisputeEventStatus("01", id).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "事件上报成功!"
              });
              socket.send({username:4,message:'有新的矛盾纠纷事件上报,需要处理!'});
              this.getInfo();
            } else {
              this.$message({
                type: "error",
                message: res.message
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消上报"
          });
        });
    },
    deleteEvent(id) {
      this.$confirm("是否删除此事件记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          api.deleteDisputeEvent(id).then(res => {
            if (res.data) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getInfo();
            } else {
              this.$message({
                type: "error",
                message: res.message
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    flushAll() {
      this.filters.eventName = this.filters.eventTypeValue = this.filters.status = null;
      if(this.$store.getters.user.userRole == "超级管理员"){
        this.filters.netGridID = null;
      }
      this.getInfo();
    },
    handleCurrentChange(val) {
      this.filters.page = val;
      this.getInfo();
    },
    ckDetail(id) {
      this.id = id;
      this.visible2 = true;
    },
    addNewRecord() {
      this.$router.push("addEvent");
    },
    GetNodeValue(val) {
      this.filters.netGridID = val;
      this.getInfo();
    },
    editEvent(id) {
      this.$router.push({
        path: "edit",
        query: {
          id: id
        }
      });
    },
    getInfo() {
      api.getDisputeEventReporterQuery(this.filters).then(res => {
        this.list = res.data.disputeEvents;
        this.totalInfo = res.data.page.totalCount;
      });
      this.filters.eventName = this.filters.eventTypeValue = this.filters.status = null;
    }
  },
  mounted() {
    this.filters.id = this.$store.getters.user.userID;
    this.form2.dealingUserID = this.$store.getters.user.userID;
    if (this.$store.getters.user.userRole != "超级管理员")
      this.filters.netGridID = this.$store.getters.user.netGridID;
    this.getInfo();
    api2.fetchServedPersonManageTypes().then(res => {
      this.EventType = res.data.codeEventType;
    });
    api3.getSSEventCode().then(res => {
      this.EventStatus = res.data.EventStatusType;
    });
  }
};
</script>


<style scoped>

</style>
